Loading project —  100%

UI DESIGN & WEB DEVELOPMENT — TECHNOLOGY

2022


Team 25K Website

Project Picture
Project Picture

Overview

The Team 25K website is a page where people interested in the Vex Robotics Competition can get information about the team, learn about the team members, and obtain contact information. The website is a single page experience with bold colours and text that represent Team 25K. Handcrafted from scratch, a simplistic design with fluid animations brings the website to life.

Details

Collaborator
Anita Du - 25K Teammate
Website Structure
Pure HTML & CSS
Animations
JS + Locomotive Scroll
Site Framework
Bootstrap
UI Design
Figma
Project Picture
Project Picture
Project Picture
Project Picture

Simple, fast, and fluid. This custom designed website showcases information about the team elegantly. Vibrant shades of orange are used throughout, contrasting with the simple white backdrop. Text animations make the website come to life. Optimised for all screen sizes, the experience is light and airy on all devices. The website incorporates all the branding resources of Team 25K, such as colours, logos, and fonts. Orange accents are used to colour and stylize the page while the modern Forma DJR typeface elegantly conveys a new but experienced team.

The design of this website directs the user through an interactive story, starting with a beautiful cover page. As the user scrolls down, they learn about Team 25K, the members on the team, and their Vex Robotics Competition season. Further down the sponsors of the team are presented. For inquiries and more information, users are presented with contact and social media links. As a single page website, it contains all the necessary information about the team while presenting it in a beautiful way.

The first step of creating this webpage design was to draw some wireframes. These wireframes represent both how the website’s layout would look like and how the user would interact with each element. Many different design directions were experimented with, such as one with a grid style cover. The wireframe sketches also included primary and secondary button designs. After these basic wireframes, higher fidelity designs were created in Figma, and a final version was selected. Designing for both desktop and mobile was critical as many users were expected to access the site through mobile social media.

Following the final design from Figma with pixel precision, the website was brought to life using pure HTML, CSS, and JavaScript for a lightweight development stack. Bootstrap and Locomotive Scroll were used for layout frameworks, scroll animation triggers and smoother scrolling. The text animations were made from scratch and draws the visitor in. After the website was released, 10 trees were planted to offset the carbon footprint for the year, making this a carbon neutral site.

All Portfolio Items

Product Design Intern @ Full Sprint Studio
UI/UX design club at Unionville High School
Branding and media for the UHS Robotics Team
An app that centralizes access to city services for York Region residents.
Designed Hopper Hangout, a fun app that helps teens plan group activities
Designed Elapse, a feature packed app to help competitors at VRC events
Participated in FLL and VRC over five years
A fun podcast about experiences in competitive robotics
Landing page website made for Team 25K
Video highlighting the fun backyard scrimmage at Silver Owl Robotics
Cinematic video showcasing Silver Owl Robotics' 2022 robot
A website design for Unionville High School’s digital newspaper
The first version and design of my website
Caution Tape Robotics Team 839's website
Logo design and 3D art for a fun design collective
Deskmat design based on Stadia Controller, previous group buy